import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Redirect } from 'react-router-dom'
import { Spin } from 'antd'
import { LoadingOutlined } from '@ant-design/icons'

import { login, addAsync } from '../store/actions'

const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />

class Login extends Component {
    doLogin = () => {
        const { addAsync } = this.props
        addAsync()
    }
    render() {
        const { loginState } = this.props
        return (
            <div>
                Login
                {loginState.loading && <Spin indicator={antIcon} />}
                { loginState.isLogin && <Redirect to="dashboard" /> }
                <button onClick={this.doLogin} >Login</button>
            </div>
        )
    }
}

const mapStateToProps = state => ({
    loginState: state.login
})

const mapDispathToProps = {login, addAsync}

export default connect(mapStateToProps, mapDispathToProps)(Login)